<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海姆立克急救法原理动画演示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            width: 100%;
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 30px;
        }
        
        header {
            background: linear-gradient(to right, #2c3e50, #3498db);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .content {
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .animation-section {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 40px;
            width: 100%;
        }
        
        .animation-container {
            flex: 1;
            min-width: 500px;
            height: 500px;
            position: relative;
            background-color: #f8f9fa;
            border-radius: 15px;
            overflow: hidden;
            border: 1px solid #e9ecef;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        }
        
        .explanation {
            flex: 1;
            min-width: 300px;
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        }
        
        .explanation h2 {
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 1.8rem;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        
        .principle-list {
            list-style-type: none;
        }
        
        .principle-list li {
            margin-bottom: 20px;
            padding-left: 30px;
            position: relative;
            line-height: 1.6;
        }
        
        .principle-list li:before {
            content: "•";
            color: #3498db;
            font-size: 1.8rem;
            position: absolute;
            left: 0;
            top: -5px;
        }
        
        .principle-list strong {
            color: #2c3e50;
            display: block;
            margin-bottom: 5px;
            font-size: 1.1rem;
        }
        
        /* 人体模型样式 */
        .body-model {
            position: absolute;
            width: 300px;
            height: 450px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .head {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #ffdbac;
            border-radius: 50%;
            top: 0;
            left: 100px;
            z-index: 10;
        }
        
        .neck {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #ffdbac;
            top: 95px;
            left: 130px;
        }
        
        .thorax {
            position: absolute;
            width: 180px;
            height: 150px;
            background-color: #f8f9fa;
            border: 2px solid #2c3e50;
            border-radius: 20px 20px 0 0;
            top: 135px;
            left: 60px;
        }
        
        .abdomen {
            position: absolute;
            width: 160px;
            height: 150px;
            background-color: #f8f9fa;
            border: 2px solid #2c3e50;
            border-top: none;
            border-radius: 0 0 20px 20px;
            top: 285px;
            left: 70px;
        }
        
        .diaphragm {
            position: absolute;
            width: 160px;
            height: 20px;
            background-color: #e74c3c;
            top: 280px;
            left: 70px;
            border-radius: 10px;
            transition: top 0.8s ease;
            z-index: 5;
        }
        
        .lungs {
            position: absolute;
            width: 160px;
            height: 120px;
            top: 150px;
            left: 70px;
        }
        
        .lung {
            position: absolute;
            width: 70px;
            height: 120px;
            background-color: rgba(52, 152, 219, 0.3);
            border: 1px solid #3498db;
            border-radius: 35px;
        }
        
        .left-lung {
            left: 0;
        }
        
        .right-lung {
            right: 0;
        }
        
        .trachea {
            position: absolute;
            width: 20px;
            height: 130px;
            background-color: #f8f9fa;
            border: 1px solid #2c3e50;
            top: 100px;
            left: 140px;
            z-index: 5;
        }
        
        .airway {
            position: absolute;
            width: 16px;
            height: 126px;
            background-color: white;
            top: 102px;
            left: 142px;
            z-index: 6;
            overflow: hidden;
        }
        
        .foreign-object {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #e74c3c;
            border-radius: 50%;
            top: 120px;
            left: 144px;
            z-index: 7;
            transition: top 1.5s ease;
        }
        
        .stomach {
            position: absolute;
            width: 80px;
            height: 60px;
            background-color: rgba(46, 204, 113, 0.3);
            border: 1px solid #2ecc71;
            border-radius: 40px 40px 40px 0;
            top: 320px;
            left: 110px;
        }
        
        .hands {
            position: absolute;
            width: 240px;
            height: 60px;
            top: 350px;
            left: 30px;
            transition: transform 0.8s ease;
        }
        
        .hand {
            position: absolute;
            width: 40px;
            height: 60px;
            background-color: #ffdbac;
            border-radius: 10px;
        }
        
        .left-hand {
            left: 0;
        }
        
        .right-hand {
            right: 0;
        }
        
        .force-arrow {
            position: absolute;
            width: 100px;
            height: 10px;
            top: 380px;
            left: 100px;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .arrow-line {
            position: absolute;
            width: 80px;
            height: 4px;
            background-color: #e74c3c;
            top: 3px;
            left: 0;
        }
        
        .arrow-head {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 10px solid #e74c3c;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            top: 0;
            right: 0;
        }
        
        /* 空气粒子 */
        .air-particle {
            position: absolute;
            width: 6px;
            height: 6px;
            background-color: #3498db;
            border-radius: 50%;
            opacity: 0;
            z-index: 15;
        }
        
        /* 增强气流动画 */
        .airflow-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 20;
        }
        
        .airflow {
            position: absolute;
            width: 16px;
            height: 126px;
            background: linear-gradient(to top, rgba(52, 152, 219, 0.8), rgba(52, 152, 219, 0));
            border-radius: 8px 8px 0 0;
            top: 102px;
            left: 142px;
            z-index: 20;
            transform-origin: bottom center;
            transform: scaleY(0);
            opacity: 0;
        }
        
        .air-burst {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(52, 152, 219, 0.8) 0%, rgba(52, 152, 219, 0) 70%);
            top: 70px;
            left: 135px;
            z-index: 25;
            opacity: 0;
            transform: scale(0);
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        button {
            padding: 14px 30px;
            border: none;
            border-radius: 50px;
            background: linear-gradient(to right, #3498db, #2980b9);
            color: white;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 15px rgba(52, 152, 219, 0.3);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
        }
        
        button:active {
            transform: translateY(1px);
        }
        
        .btn-play {
            background: linear-gradient(to right, #2ecc71, #27ae60);
            box-shadow: 0 6px 15px rgba(46, 204, 113, 0.3);
        }
        
        .btn-play:hover {
            box-shadow: 0 8px 20px rgba(46, 204, 113, 0.4);
        }
        
        .btn-reset {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            box-shadow: 0 6px 15px rgba(231, 76, 60, 0.3);
        }
        
        .btn-reset:hover {
            box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4);
        }
        
        .current-state {
            font-size: 1.3rem;
            font-weight: 600;
            color: #2c3e50;
            margin: 25px 0;
            text-align: center;
            min-height: 40px;
            padding: 10px 20px;
            background-color: #f8f9fa;
            border-radius: 10px;
            width: 100%;
            max-width: 800px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }
        
        .key-points {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
            width: 100%;
        }
        
        .point-card {
            flex: 1;
            min-width: 250px;
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            border-top: 5px solid #3498db;
        }
        
        .point-card h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .point-card h3 i {
            color: #3498db;
            font-size: 1.5rem;
        }
        
        .emergency-note {
            background-color: #fff3cd;
            border-left: 5px solid #ffc107;
            padding: 20px;
            margin-top: 30px;
            border-radius: 10px;
            width: 100%;
            max-width: 800px;
        }
        
        @media (max-width: 768px) {
            .animation-section {
                flex-direction: column;
            }
            
            .animation-container {
                min-width: 100%;
                height: 400px;
            }
            
            .body-model {
                transform: translate(-50%, -50%) scale(0.8);
            }
        }
        
        /* 动画关键帧 */
        @keyframes compress {
            0% { transform: scaleY(1); }
            50% { transform: scaleY(0.7); }
            100% { transform: scaleY(1); }
        }
        
        @keyframes airFlow {
            0% { 
                opacity: 0;
                transform: translateY(0);
            }
            20% {
                opacity: 1;
            }
            80% {
                opacity: 1;
            }
            100% { 
                opacity: 0;
                transform: translateY(-200px);
            }
        }
        
        @keyframes airflowRise {
            0% { 
                transform: scaleY(0);
                opacity: 0;
            }
            30% {
                transform: scaleY(1);
                opacity: 0.8;
            }
            70% {
                transform: scaleY(1);
                opacity: 0.8;
            }
            100% { 
                transform: scaleY(0);
                opacity: 0;
            }
        }
        
        @keyframes airBurst {
            0% { 
                opacity: 0;
                transform: scale(0);
            }
            50% {
                opacity: 0.8;
                transform: scale(1);
            }
            100% { 
                opacity: 0;
                transform: scale(1.5);
            }
        }
        
        .compressing {
            animation: compress 1.5s ease-in-out;
        }
        
        .air-flow {
            animation: airFlow 1.5s ease-out;
        }
        
        .airflow-active {
            animation: airflowRise 1.5s ease-out;
        }
        
        .airburst-active {
            animation: airBurst 1s ease-out;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>海姆立克急救法原理动画演示</h1>
            <p class="subtitle">展示腹部冲击如何产生气流并排出气道异物的生理机制</p>
        </header>
        
        <div class="content">
            <div class="current-state" id="currentState">初始状态：气道被异物阻塞，患者无法呼吸</div>
            
            <div class="animation-section">
                <div class="animation-container">
                    <div class="body-model">
                        <div class="head"></div>
                        <div class="neck"></div>
                        <div class="thorax"></div>
                        <div class="abdomen"></div>
                        <div class="diaphragm" id="diaphragm"></div>
                        <div class="lungs">
                            <div class="lung left-lung" id="leftLung"></div>
                            <div class="lung right-lung" id="rightLung"></div>
                        </div>
                        <div class="trachea"></div>
                        <div class="airway" id="airway">
                            <!-- 空气粒子将通过JS添加 -->
                        </div>
                        <div class="foreign-object" id="foreignObject"></div>
                        <div class="stomach"></div>
                        <div class="hands" id="hands">
                            <div class="hand left-hand"></div>
                            <div class="hand right-hand"></div>
                        </div>
                        <div class="force-arrow" id="forceArrow">
                            <div class="arrow-line"></div>
                            <div class="arrow-head"></div>
                        </div>
                    </div>
                    
                    <!-- 增强气流动画元素 -->
                    <div class="airflow-container">
                        <div class="airflow" id="airflow"></div>
                        <div class="air-burst" id="airBurst"></div>
                    </div>
                </div>
                
                <div class="explanation">
                    <h2>海姆立克急救法原理</h2>
                    <ul class="principle-list">
                        <li>
                            <strong>腹部冲击</strong>
                            <p>施救者从背后环抱患者腹部，快速向上向内挤压，使腹部压力骤然增加。</p>
                        </li>
                        <li>
                            <strong>膈肌上升</strong>
                            <p>腹部压力迫使膈肌向上移动，压缩胸腔空间，减小肺容积。</p>
                        </li>
                        <li>
                            <strong>肺部压缩</strong>
                            <p>肺部受到挤压，内部压力迅速增加，产生高速气流。</p>
                        </li>
                        <li>
                            <strong>气流冲击</strong>
                            <p>高速气流从肺部经气管向上冲出，将阻塞气道的异物排出。</p>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="controls">
                <button class="btn-play" id="playBtn">
                    <span>▶</span> 播放原理演示
                </button>
                <button id="stepBtn">
                    <span>⏭️</span> 分步演示
                </button>
                <button class="btn-reset" id="resetBtn">
                    <span>↺</span> 重置动画
                </button>
            </div>
            
            <div class="key-points">
                <div class="point-card">
                    <h3>📊 压力变化</h3>
                    <p>腹部冲击使腹内压迅速升高至100-150 mmHg，迫使膈肌上移3-5厘米，显著减小胸腔容积。</p>
                </div>
                <div class="point-card">
                    <h3>💨 气流速度</h3>
                    <p>肺部压缩产生的高速气流速度可达200-400升/分钟，足以将大多数气道异物冲出。</p>
                </div>
                <div class="point-card">
                    <h3>🔄 生理机制</h3>
                    <p>利用人体残气量(约1500ml)产生冲击力，模拟人工咳嗽，但力量比自主咳嗽强5-10倍。</p>
                </div>
            </div>
            
            <div class="emergency-note">
                <strong>重要提示：</strong> 海姆立克急救法仅适用于气道完全梗阻的清醒患者。对于婴儿、孕妇或肥胖者需采用改良手法。本演示仅为教学用途，实际急救中请接受专业培训。
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const currentStateEl = document.getElementById('currentState');
            const playBtn = document.getElementById('playBtn');
            const stepBtn = document.getElementById('stepBtn');
            const resetBtn = document.getElementById('resetBtn');
            const diaphragmEl = document.getElementById('diaphragm');
            const leftLungEl = document.getElementById('leftLung');
            const rightLungEl = document.getElementById('rightLung');
            const foreignObjectEl = document.getElementById('foreignObject');
            const handsEl = document.getElementById('hands');
            const forceArrowEl = document.getElementById('forceArrow');
            const airwayEl = document.getElementById('airway');
            const airflowEl = document.getElementById('airflow');
            const airBurstEl = document.getElementById('airBurst');
            
            let isAnimating = false;
            let currentStep = 0;
            
            const states = [
                "初始状态：气道被异物阻塞，患者无法呼吸",
                "步骤1：施救者双手置于患者腹部，准备实施冲击",
                "步骤2：快速向上向内挤压腹部，增加腹内压力",
                "步骤3：腹部压力迫使膈肌上升，压缩肺部",
                "步骤4：肺部压缩产生高速气流，冲击异物",
                "步骤5：异物被气流冲出，气道恢复通畅"
            ];
            
            // 计算气道中心位置
            function calculateAirwayCenter() {
                const airwayRect = airwayEl.getBoundingClientRect();
                const containerRect = document.querySelector('.animation-container').getBoundingClientRect();
                
                // 计算气道中心相对于容器的位置
                const centerX = airwayRect.left + airwayRect.width/2 - containerRect.left;
                const centerY = airwayRect.top - containerRect.top;
                
                return { x: centerX, y: centerY };
            }
            
            function resetAnimation() {
                isAnimating = false;
                currentStep = 0;
                
                // 重置所有元素到初始状态
                diaphragmEl.style.top = '280px';
                leftLungEl.classList.remove('compressing');
                rightLungEl.classList.remove('compressing');
                foreignObjectEl.style.top = '120px';
                handsEl.style.transform = 'scale(1)';
                forceArrowEl.style.opacity = '0';
                airflowEl.classList.remove('airflow-active');
                airBurstEl.classList.remove('airburst-active');
                
                // 清除空气粒子
                const particles = document.querySelectorAll('.air-particle');
                particles.forEach(particle => particle.remove());
                
                currentStateEl.textContent = states[0];
            }
            
            function createAirParticles() {
                // 清除现有粒子
                const existingParticles = document.querySelectorAll('.air-particle');
                existingParticles.forEach(particle => particle.remove());
                
                // 创建新粒子
                for (let i = 0; i < 15; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'air-particle';
                    
                    // 计算气道中心位置
                    const center = calculateAirwayCenter();
                    
                    // 粒子位置在气道中心
                    particle.style.left = `${center.x - 3}px`; // 3px是粒子宽度的一半
                    particle.style.top = `${center.y + 100}px`; // 从气道底部开始
                    
                    // 随机延迟
                    const delay = Math.random() * 0.8;
                    particle.style.animationDelay = `${delay}s`;
                    
                    // 添加到容器
                    document.querySelector('.airflow-container').appendChild(particle);
                }
                
                // 添加动画类
                setTimeout(() => {
                    const particles = document.querySelectorAll('.air-particle');
                    particles.forEach(particle => {
                        particle.classList.add('air-flow');
                    });
                }, 100);
            }
            
            function animateStep(step) {
                currentStep = step;
                currentStateEl.textContent = states[step];
                
                switch(step) {
                    case 1:
                        // 准备姿势
                        handsEl.style.transform = 'scale(1.1)';
                        break;
                    case 2:
                        // 腹部挤压
                        handsEl.style.transform = 'scale(0.9)';
                        forceArrowEl.style.opacity = '1';
                        break;
                    case 3:
                        // 膈肌上升，肺部压缩
                        diaphragmEl.style.top = '250px';
                        leftLungEl.classList.add('compressing');
                        rightLungEl.classList.add('compressing');
                        break;
                    case 4:
                        // 产生气流
                        createAirParticles();
                        airflowEl.classList.add('airflow-active');
                        airBurstEl.classList.add('airburst-active');
                        break;
                    case 5:
                        // 异物排出
                        foreignObjectEl.style.top = '50px';
                        setTimeout(() => {
                            forceArrowEl.style.opacity = '0';
                        }, 500);
                        break;
                }
            }
            
            function playFullAnimation() {
                if (isAnimating) return;
                
                isAnimating = true;
                resetAnimation();
                
                let step = 1;
                const interval = setInterval(() => {
                    animateStep(step);
                    step++;
                    
                    if (step > 5) {
                        clearInterval(interval);
                        isAnimating = false;
                    }
                }, 1500);
            }
            
            function nextStep() {
                if (isAnimating) return;
                
                currentStep++;
                if (currentStep > 5) {
                    currentStep = 0;
                    resetAnimation();
                } else {
                    animateStep(currentStep);
                }
            }
            
            // 事件监听
            playBtn.addEventListener('click', playFullAnimation);
            stepBtn.addEventListener('click', nextStep);
            resetBtn.addEventListener('click', resetAnimation);
            
            // 初始化
            resetAnimation();
        });
    </script>
</body>
</html>